<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static" />
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%
	String path = request.getContextPath();
	String basePath = request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>
<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				console.log("*******${ctx}/hello*******");
				var sock = new SockJS("${ctx}/hello");
				var stomp = Stomp.over(sock);

				stomp.connect('guest', 'guest', function(frame) {
					console.log('*****  Connected  *****');
					$('#msg').append("<b>*****  Connected  *****</b><br/>");
					//一次性订阅，只返回一次  
					stomp.subscribe("/app/subscribeme", handleOneTime);
					//订阅代理，代理发消息将会接收到  
					stomp.subscribe("/topic/hi", handleMsg);
				}, function(error) {
					console.log('error:' + error);

				});

				function handleOneTime(message) {
					//alert('123');  
					console.log('Received: ', message);
					$('#msg').append(
							"<b>handleOneTime - Received: " + message.body
									+ "</b><br/>");
				}

				function handleMsg(message) {
					console.log('Received2: ', message);
					$('#msg').append(
							"<b>Received: " + message.body + "</b><br/>");
					// if (JSON.parse(message.body).message === 'Polo!') {  
					//     setTimeout(function(){sayMarco()}, 2000);  
					// }  
				}

				function handleErrors(message) {
					console.log('RECEIVED ERROR: ', message);
					$('#msg').append(
							"<b>GOT AN ERROR!!!: "
									+ JSON.parse(message.body).message
									+ "</b><br/>");
				}

				function send() {
					console.log('Sending msg!');
					//发送  
					stomp.send("/app/hi", {}, JSON.stringify({
						'message' : $('#message').val()
					}));
					//        stomp.send("/topic/marco", {},  
					//                JSON.stringify({ 'message': 'Marco!' }));  
					$('#msg').append(
							"<b>Send: " + $('#message').val() + "!</b><br/>");
				}

				$('#stop').click(function() {
					sock.close();
					$('#msg').append("<b>Connection closed!</b><br/>");
				});
				//发送
				$('#send').bind('click', function() {
					send();
				});

			});
</script>
<title>stomp test</title>
</head>
<body>
	<div class="page-header" id="tou">
		webSocket-stomp测试程序
		<button type="button" id="stop">关闭连接</button>
	</div>
	<div class="well" id="msg"></div>
	<div>
		<div>
			<input type="text" id="message"><br />
			<button type="button" id="send">发送</button>
		</div>
	</div>
</body>
</html>